<template>
  <div class="common-layout">
    <page-header></page-header>
    <div class="content"><slot></slot></div>
    <page-footer :link-list="footerLinks" :copyright="copyright"></page-footer>
  </div>
</template>

<script>
  import PageFooter from '@/layouts/footer/PageFooter'
  import PageHeader from '@/layouts/header/PageHeader'
  import { mapState } from 'vuex'

  export default {
    name: 'CommonLayout',
    components: { PageFooter, PageHeader },
    computed: {
      ...mapState('setting', ['footerLinks', 'copyright']),
    },
  }
</script>

<style scoped lang="less">
  .common-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    background-color: @layout-body-background;
    .content {
      display: flex;
      display: -webkit-flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      // padding: 90px 0;
      background-image: url('~@/assets/img/login-bg.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      // @media (max-width: 768px) {
      //   padding: 140px 0 24px;
      // }
    }
  }
</style>
